<template>
  <div>
    <van-popup v-model:show="Codeopen" position="bottom" closeable close-icon="arrow-left" :style="{ height: '100%',background: 'linear-gradient(0deg, #0E1011, #222222)' }" close-icon-position="top-left">
      <h1 class="title">填写验证码</h1>
      <p class="code-txt">验证码已发送至 {{phone.mobile}}</p>
      <!-- 密码输入框 -->
      <van-password-input :value="formData.pasteResult" :focused="formData.showKeyboard" @focus="formData.showKeyboard = true" :mask="false" />
      <div class="time">
        {{phone.sendBtnText}}
      </div>
      <!-- 数字键盘 -->
      <van-number-keyboard v-model="formData.pasteResult" :show="formData.showKeyboard" @blur="formData.showKeyboard = false" @input="onInput" />
    </van-popup>
  </div>
</template>
<script>
import { defineComponent, ref, reactive, toRefs } from 'vue'
import { getCode, imgcode, loginByPhone, registerLogin } from "@/api/user";
import { useRouter } from 'vue-router'
import { setLocal } from "@/utils/localStorage";
import { Popup, Toast } from "vant";
import { stringNum } from "@/utils/phone";
export default defineComponent({
  watch: {
    phone: {
      handler(val) {
      }
    }
  },
  components: {
    Popup
  },
  props: {
    phone: {
      type: Object,
      default: ''
    }
  },
  setup(props, context) {
    // const pObj = toRefs(props).name.value.mobile;
    // 
    const router = useRouter()
    const phoneData = toRefs(props).phone
    const Codeopen = ref(false)
    const formData = reactive({
      pasteResult: '',
      showKeyboard: true,
      sendBtnText: "60秒后获取验证码",
    })
    // const phone = ref('')
    const onInput = (key) => {
      formData.pasteResult = (formData.pasteResult + key).slice(0, 6);
      let str = stringNum(formData.pasteResult)
      if (stringNum(formData.pasteResult) === 6) {

        formData.showKeyboard = false
        Codeopen.value = false
        const para = {
          mobile: phoneData.value.mobile,
          verificationCode: formData.pasteResult
        }
        registerLogin(para).then(res => {
          if (res.data.success) {
            var token = res.data.token;
            localStorage.setItem('token', res.data.data.token)
            localStorage.setItem('tel', res.data.data.user.mobile)
            if (!res.data.data.user.password) {
              localStorage.setItem('falg', false)
            } else {
              localStorage.setItem('falg', true)
            }
            router.push('/me')
          } else {
            formData.pasteResult = ""
            Toast(res.data.message);
          }
          formData.pasteResult = ""
          formData.loading = false
        })
      }
    }
    return {
      Codeopen,
      onInput,
      formData,
      //phone
    }
  }
})
</script>
<style lang="less" scoped>
.time {
  font-size: 28px;
  color: #ffffff;
  line-height: 48px;
  opacity: 0.6;
  text-align: center;
  margin-top: 100px;
}
.title {
  font-size: 36px;
  color: #ffffff;
  line-height: 48px;
  margin: 150px 0px 10px 60px;
}
&:deep(.van-password-input__item) {
  position: relative;
  background: transparent;
  color: #ffffff;
}
&:deep(.van-hairline--surround:after) {
  border-width: 0px !important;
}
&:deep(.van-password-input__item)::before {
  position: absolute;
  content: '';
  width: 64px;
  height: 16px;
  background: #282a2c;
  border-radius: 2px;
  bottom: 0px;
}
&:deep(.van-hairline--left)::after {
  border: none;
}
.code-txt {
  font-size: 28px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 48px;
  margin-left: 60px;
}
.pwd-warp {
  margin-top: 100px;
}
</style>